<template>
  <div>
    <!-- form -->
    <h1>收集学员信息区域</h1>
    <div>
      <p>学员姓名</p>
      <input type="text" placeholder="学员姓名" v-model="props.formList.name" />
      <p>学员手机号</p>
      <input
        type="text"
        placeholder="学员手机号"
        v-model="props.formList.tel"
      />
    </div>
    <p>
      <button class="btn" @click="add">提交</button>
      <button @click="reset">重置</button>
    </p>
  </div>
</template>

<script setup>
import { reactive, toRefs, defineEmits, defineProps } from "vue";
const props = defineProps(["formList"]);
const emits = defineEmits(["form"]);
//添加
function add() {
  if (props.formList.name == "" || props.formList.tel == "") {
    alert("姓名或电话不能为空");
    return false;
  } else {
    emits("form");
    // 清空
    props.formList.name = "";
    props.formList.tel = "";
  }
}
//重置
function reset() {
  // 清空
  props.formList.name = "";
  props.formList.tel = "";
}
</script>

<style lang="scss" scoped>
input {
  width: 100%;
  height: 25px;
  text-indent: 10px;
}
.btn {
  background-color: #107a55;
  color: #fff;
}
button {
  border-radius: 5px;
  margin-top: 20px;
  border: 0;
  width: 50px;
  height: 30px;
  background-color: #ffbc08;
  margin-left: 10px;
}
</style>